<!--日期选择样式参考-->
<template>
  <view class="main">
    <uni-row class="data">
      <uni-col :span="12">
        <view class="date_l"><text class="date_l_text">选择入园日期</text></view>
      </uni-col>
      <uni-col :span="12">
        <view class="date_r"><text class="date_l_text">{{format}}</text></view>
      </uni-col>
    </uni-row>
    <uni-card class="top" margin="0" padding="12px 0px 0px 13px">
      <view class="" v-for="(item,index) in time1" :key="index">
        <view :class="getClass(item)" @click="checkDate(item)">
          <view class="week"><text :class="getClass1(item)" @click="checkDate1(item)">{{item.week}}</text></view>
          <view class="num"><text  :class="getClass2(item)" @click="checkDate2(item)">{{item.day}}</text></view>
          <view class="state"><text :class="getClass3(item)" @click="checkDate3(item)">{{item.state}}</text></view>
        </view>
      </view>
    </uni-card>
    <view class="date_l"><text class="date_l_text">选择入园时段</text></view>
    <uni-card class="top" margin="0" padding="12px 0px 0px 13px">
      <view v-for="(item,index) in time2" :key="index" @click="checkTime(item)">
        <view class="list2"><text class="list2_text">{{item.period}}&nbsp;|&nbsp;&nbsp;{{item.state}}</text></view>
      </view>

    </uni-card>
    <button @click="btn()" class="btn"  id="see" :disabled="disabled">
      <text class="word">时段确认</text></button>
  </view>
</template>

<script setup>
import {
  computed,
  ref
} from 'vue';

import time from '../../data/time.json'
let time1 = ref([])
time1.value=time.dates

let time2 = ref([])
time2.value=time.periods

//console.log(time1.value)
let checkValue = ref({})
let checkValue1 = ref({})
let checkValue2 = ref({})
let checkValue3 = ref({})
let checkTimeValue = ref({})

let checkDate = function (item){
  checkValue.value = item
  sessionStorage.setItem("day",checkValue.value.day)
}
let checkDate1 = function (item){
  checkValue1.value = item
}
let checkDate2 = function (item){
  checkValue2.value = item
}
let checkDate3 = function (item){
  checkValue3.value = item
}
let checkTime = function (item){
  checkTimeValue.value = item
  sessionStorage.setItem("period",checkTimeValue.value.period)
}
let getClass = function (item){
  // 判断传过来的item和选择的日期是不是同一个
  if(item.state==='已约满'){
    return 'list noClick'
  }else if (item.day === checkValue.value.day) {
    return 'a'; // 返回选中的类名
  } else {
    return 'list'; // 返回默认类名
  }
}
let getClass1 = function (item){
  if(item.state==='已约满'){
    return 'b2'
  }else if (item.day === checkValue.value.day) {
    return 'b'; // 返回选中的类名
  } else {
    return 'week_text'; // 返回默认类名
  }
}
let getClass2 = function (item){
  if(item.state==='已约满'){
    return 'c2'
  }else if (item.day === checkValue.value.day) {
    return 'c'; // 返回选中的类名
  } else {
    return 'num_text'; // 返回默认类名
  }
}
let getClass3 = function (item){
  // 判断传过来的item和选择的日期是不是同一个
  if (item.day === checkValue.value.day) {
    return 'd'; // 返回选中的类名
  } else {
    return 'state_text'; // 返回默认类名
  }
}
const format = computed(() => {
  const oDate = new Date()
  const year = oDate.getFullYear()
  const month = oDate.getMonth() + 1
  if (month < 10) {
    return year + '.0' + month
  } else {
    return year + '.' + month
  }
})
function btn(){
  let record = sessionStorage.getItem("record")
  if(record==='personal'){
    uni.navigateTo({
      url: '/pages/apointment/personal-app'
    })
  }else if(record==='group'){
    uni.navigateTo({
      url: '/pages/apointment/organization'
    })
  }
}

</script>

<style scoped>
.main {
  margin: 0 12px;
  background-color: #F3F5F9;
  height: 720px;
}

.data {
  height: 45px;
}

.date_l_text {
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  line-height: 61px;
}

.date_r {
  text-align: right;
}

/deep/.uni-calendar-item--isDay {
  background-color: #8DCB6D;
}

.top {
  height: 166px;
  background: #FFFFFF;
  border-radius: 12px;
}

.top .list {
  width: 42px;
  height: 64px;
  background-color: #F5F5F5;
  border-radius: 4px;
  float: left;
  margin: 2px;
}

.a{
  background-color: #8DCB6D;
  width: 42px;
  height: 64px;
  border-radius: 4px;
  float: left;
  margin: 2px;
}
.noClick{
  pointer-events: none;
}

.week {
  text-align: center;
  height: 24px;
}

.week_text {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 10px;
  color: #000000;
  letter-spacing: 0;
  line-height: 24px;
}

.b{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 24px;
  color: #fff;
}
.b2{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 24px;
  color: #A4A4A4;
}

.num {
  text-align: center;
}

.num_text {
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}

.c{
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  color: #fff;
}
.c2{
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  color: #A4A4A4;
}

.state {
  text-align: center;
  line-height: 10px;
}

.state_text {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 8px;
  color: #A4A4A4;
  letter-spacing: 0;
}

.d{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0;
  color: #fff;
}

.list2 {
  width: 160px;
  height: 27px;
  background: #F5F5F5;
  border-radius: 4px;
  float: left;
  margin: 2px;
  text-align: center;
}
.list2:hover{
  background-color: #8DCB6D;
}
.list2:hover .list2_text{
  color:#fff;
}
.list2_text{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 13px;
  color: #6B6B6B;
  letter-spacing: 0;
  line-height: 27px;
}
.btn{
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
  margin: 15px;
  position: fixed;
  width: calc(100% - 50px);
  bottom: 0;
}
.word{
  width: 68px;
  height: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: 0;
}

</style>